<!doctype html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <th:block th:include="/A0723/include :: header('绑定抖音')"/>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">绑定抖音</h1>
</header>
<div class="mui-content">
    <div class="forget_from">
        <div class="mui-input-row">
            <label>抖音ID：</label>
            <input type="text" id="tiktokId" value="">
        </div>

        <div class="mui-input-row">
            <label>上传抖音个人页：</label>
            <div class="file">
                <input id="personalPage" type="hidden">
                <input type="file" onchange="readFile(this,'#personalPage','#preview-page')"/>
                <img class="preview-img" id="preview-page" src="images/up.png" alt="">
            </div>
        </div>
    </div>
    <button type="button" onclick="bindDouYin()" class="mui-btn mui-btn-blue mui-btn-block mui_btn">确定</button>
</div>
<th:block th:include="/A0723/include :: footer"/>
<th:block th:include="/A0723/include :: common"/>
<script type="text/javascript">
    $(function () {
        getDouYin()
    })

    let data = {}

    //验证
    function validateDouYin() {
        let tiktokId = $("#tiktokId").val();
        if (tiktokId == null || tiktokId === '') {
            mui.toast('请输入抖音号', {duration: 'long', type: 'div'})
            return
        }
        let personalPage = $("#personalPage").val();
        if (personalPage == null || personalPage === '') {
            mui.toast('请上传抖音个人主页', {duration: 'long', type: 'div'})
            return
        }

        data.tiktokId = tiktokId;
        data.personalPage = personalPage;
        return true;
    }

    //绑定抖音
    function bindDouYin() {
        if (validateDouYin()) {
            mui.ajax(ctx + 'front/douYin', {
                data: data,
                dataType: 'json',//服务器返回json格式数据
                type: 'post',//HTTP请求类型
                timeout: 10000,//超时时间设置为10秒；
                headers: {'Content-Type': 'application/json'},
                success: function (res) {
                    //服务器返回响应，根据响应结果，分析是否登录成功；

                    mui.toast(res.msg, {duration: 'long', type: 'div'})
                    setInterval(function () {
                        if (res.code == 0) {
                            window.location.href = ctx + 'front/toMine'
                        }

                    }, 3000)
                },
                error: function (xhr, type, errorThrown) {
                    //异常处理；
                    console.log(type);
                }
            });
        }
    }

    //获取抖音
    function getDouYin() {
        mui.ajax(ctx + 'front/personal/douYin', {
            dataType: 'json',//服务器返回json格式数据
            type: 'get',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            headers: {'Content-Type': 'application/json'},
            success: function (res) {
                if (res.data != null) {
                    //服务器返回响应，根据响应结果
                    $("#tiktokId").val(res.data.tiktokId);
                    $("#personalPage").val(res.data.personalPage);
                    $(".preview-img").attr({'src': res.data.personalPage})
                    $(".forget_from").append('<div class="mui-input-row">\n' +
                        '<label>状态：</label>\n' +
                        '<input type="text" value="' + (res.data.state == 0 ? '申请中' : res.data.state == 1 ? '通过' : res.data.state == 2 ? '失败' : '') + '" >\n' +
                        '</div>')
                }

            },
            error: function (xhr, type, errorThrown) {
                //异常处理；
                console.log(type);
            }
        });

    }
</script>
</body>

</html>
